<template>
  <border-box title="素材库">
    <div slot="titleRight" class="title-right-container">
      <a-dropdown :trigger="['click']" style="margin-right: 10px">
        <a-button class="ant-dropdown-link">
<!--          {{ queryParam.materialType === 1 ? '图片' : '视频' }}-->
          <span v-if="queryParam.materialType === 1">图片</span>
          <span v-else-if="queryParam.materialType === 2">视频</span>
          <span v-else>音频</span>
          <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item @click="changeMaterialType(1)">图片</a-menu-item>
          <a-menu-item @click="changeMaterialType(2)">视频</a-menu-item>
          <a-menu-item @click="changeMaterialType(3)">音频</a-menu-item>
        </a-menu>
      </a-dropdown>
      <span class="add-material" @click="addMaterial">新增素材</span>
    </div>
    <a-input-search v-model="queryParam.keyword" placeholder="请输入搜索内容" @search="loadData(1)"></a-input-search>
    <a-tabs @change="tabChange">
      <a-tab-pane :key="1" tab="我的素材"></a-tab-pane>
      <a-tab-pane :key="2" tab="全部素材"></a-tab-pane>
      <a-tab-pane :key="3" tab="我的部门"></a-tab-pane>
    </a-tabs>
    <a-spin :spinning="loading">
      <a-empty v-if="ipagination.total===0"></a-empty>
      <a-row v-else-if="queryParam.materialType==3" type="flex">
        <a-col class="item" style="margin-right: 10px;margin-bottom: 5px" v-for="(item,index) in dataSource" :key="index" @click="insert(item.materialUrl)">
          <a-icon style="text-align: center;width: 100%" type='play-circle' />
          <div style="text-align: center;width: 100%">{{item.remark}}</div>
        </a-col>
      </a-row>
      <a-row v-else type="flex">
        <a-col class="item" v-for="(item,index) in dataSource" :key="index" @click="insert(item.materialUrl)">
          <img :draggable="false" class="item-img" :src="queryParam.materialType==1?item.materialUrl:item.materialCoverUrl" :title="item.materialName">
          <div class="item-desc">{{item.keyword}}</div>
        </a-col>
      </a-row>
    </a-spin>
    <a-pagination size="small" @change="loadData" style="text-align: right" v-model="ipagination.current" :total="ipagination.total"
                  show-less-items/>
    <material-form-modal v-if="showModal" :visible.sync="showModal" :materialType.sync="queryParam.materialType" @refresh="loadData(1)"></material-form-modal>
  </border-box>
</template>

<script>
  //素材库
  import BorderBox from "../BorderBox";
  import MaterialFormModal from "./MaterialFormModal";
  import {JeecgListMixin} from "@/mixins/JeecgListMixin";

  export default {
    name: "MaterialStore",
    mixins: [
      JeecgListMixin
    ],
    components: {MaterialFormModal, BorderBox},
    data() {
      return {
        showModal: false,
        queryParam: {
          materialType: 1,
          materType: 1
        },
        url: {
          list: 'materia/crdMaterialInfo/list'
        }
      }
    },
    methods: {
      tabChange(key) {
        this.queryParam.materType = key;
        this.loadData(1)
      },
      getQueryField() {
        return ''
      },
      //新增素材
      addMaterial() {
        this.showModal = true;
      },
      //插入富文本
      insert(url) {
        if (this.queryParam.materialType === 1) {
          this.$emit('insert', '<img src="' + url + '" />')
        } else if (this.queryParam.materialType === 2) {
          this.$emit('insert', '<p style="text-align: center"><video width="600" controls src="' + url + '" ></video></p>');
        } else {
          this.$emit('insert', '<p style="text-align: center"><audio controls="controls"  style="width: 600px" src="' + url + '" ></audio></p>');
        }
      },
      changeMaterialType(type) {
        this.queryParam.materialType = type;
        this.loadData(1); // 重新加载第一页数据
      }
    }
  }
</script>

<style scoped lang="less">
  .item {
    &-img {
      position: relative;
      width: 90px;
      height: 80px;
      border-radius: 5px;
      border: 1px solid #ededed;
      margin: 5px;
      cursor: pointer;
    }

    &-desc {
      display: none;
    }
  }

  .item:hover {
    opacity: 0.75;
  }

  .item:hover .item-desc {
    font-size: 12px;
    display: block;
    position: absolute;
    top: 50%;
    text-align: center;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }

  .title-right-container {
    display: flex;
    align-items: center;
    gap: 10px; /* 控制元素间距 */
  }

  .add-material {
    cursor: pointer;
    color: #1890ff;
    font-weight: bold;
    &:hover {
      opacity: 0.8;
    }
  }

  /* 调整下拉按钮样式 */
  .ant-dropdown-link {
    padding: 0 8px;
  }
</style>